<!--
 * @Description: 登录组件
 * @Author: hai-27
 * @Date: 2020-02-19 20:55:17
 * @LastEditors: hai-27
 * @LastEditTime: 2020-03-01 15:34:08
 -->
<template>
  <div id="myLogin">
    <el-dialog title="登录" width="300px" center :visible.sync="isLogin">
      <el-form :model="LoginUser"  status-icon ref="ruleForm" class="demo-ruleForm">
        <el-form-item prop="name">
          <el-input prefix-icon="el-icon-user-solid" placeholder="请输入账号" v-model="LoginUser.name"></el-input>
        </el-form-item>
        <el-form-item prop="pass">
          <el-input
            prefix-icon="el-icon-view"
            type="password"
            placeholder="请输入密码"
            v-model="LoginUser.pass"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="medium" type="primary" @click="Login" style="width:100%;">登录</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { mapActions } from "vuex";

export default {
  name: "MyLogin",
  data() {
    return {
      LoginUser: {
        name: "",
        pass: ""
      },

    };
  },
  computed: {
    // 获取vuex中的showLogin，控制登录组件是否显示
    isLogin: {
      get() {
        return this.$store.getters.getShowLogin;
      },
      set(val) {
        this.$refs["ruleForm"].resetFields();
        this.setShowLogin(val);
      }
    }
  },
  methods: {
    ...mapActions(["setUser", "setShowLogin","setToken"]),
    Login() {

          axios.post('http://myphoenixshop.cpolar.io/login',{
            "account":this.LoginUser.name,
            "password":this.LoginUser.pass
          }).then(res=>{
            console.log(res.data.msg);
            if (res.data.msg == "success") {
              this.$message({
                type: 'success',
                message: '登录成功'
              });
              this.setToken(res.data.data);
              this.setUser(this.LoginUser.name)
              console.log(this.$store.getters.getToken)
              this.isLogin = false
            }else{
              this.$message({
                type: 'error',
                message: res.message
              });
            }
          })
    }
  }
};
</script>
<style>
</style>
